<template>
  <div class="app-wrapper" :class="{ 'collapse': !sidebar.opened }">
    <!-- Particles background for tech effect -->
    <div class="particles-background"></div>

    <!-- Global Header -->
    <div class="global-header">
      <div class="global-title">上海AiOps云计算集训营 By DriverZeng（曾老湿）</div>
    </div>

    <!-- Sidebar -->
    <div class="sidebar-container">
      <!-- 头像上传组件 -->
      <div class="avatar-container" :class="{ 'collapsed': !sidebar.opened }">
        <div class="avatar-wrapper cyber-border">
          <img v-if="avatar" key="avatar-img" :src="avatar" class="avatar-img" alt="用户头像">
          <i v-else key="default-avatar" class="fa fa-user-circle default-avatar"></i>
          <input type="file" ref="avatarInput" accept="image/*" style="display: none;" @change="handleAvatarChange">
          <div class="avatar-hover" @click="triggerUpload">
            <i class="fa fa-camera"></i>
            <span v-if="sidebar.opened" key="upload-text">上传头像</span>
          </div>
        </div>
      </div>

      <div class="logo-container flow-light">
        <div class="logo-wrapper">
          <i class="logo-icon fa fa-rocket"></i> <!-- 改为火箭图标，更有科技感 -->
          <div class="logo-text" :class="{ 'hidden': !sidebar.opened }">
            <h1 class="logo cyber-title">
              <span class="title-part title-devops">DevOps</span>
              <span class="title-separator">|</span>
              <span class="title-part title-system">自动化运维系统</span>
            </h1>
          </div>
        </div>
      </div>
      <!-- 菜单滚动容器 -->
      <div class="menu-scroll-container">
        <el-menu ref="menuRef" :default-active="$route.path" class="el-menu-vertical" background-color="transparent"
          text-color="#e6e6e6" active-text-color="#00eaff" :collapse="!sidebar.opened" router
          :collapse-transition="false" :unique-opened="true"
          @open="handleMenuOpen" @close="handleMenuClose">

          <!-- 菜单加载状态 -->
          <div v-if="menuLoading" class="menu-loading">
            <i class="fa fa-spinner fa-spin"></i>
            <span v-if="sidebar.opened">加载菜单中...</span>
          </div>

          <!-- 动态菜单 -->
          <template v-else v-for="menu in userMenus" :key="menu.id">
            <!-- 有子菜单的情况 -->
            <template v-if="menu.children && menu.children.length">
              <el-sub-menu :index="menu.id" :data-index="menu.id">
                <template #title>
                  <i :class="menu.icon || 'fa fa-circle'"></i>
                  <span>{{ menu.name }}</span>
                </template>

                <!-- 二级菜单 -->
                <template v-for="child in menu.children" :key="child.id">
                  <!-- 二级菜单有子菜单的情况（三级菜单） -->
                  <template v-if="child.children && child.children.length">
                    <el-sub-menu :index="child.id">
                      <template #title>
                        <i :class="child.icon || 'fa fa-circle-o'"></i>
                        <span>{{ child.name }}</span>
                      </template>

                      <!-- 三级菜单 -->
                      <el-menu-item v-for="grandChild in child.children" :key="grandChild.id" :index="grandChild.path">
                        <i :class="grandChild.icon || 'fa fa-dot-circle-o'"></i>
                        <span>{{ grandChild.name }}</span>
                      </el-menu-item>
                    </el-sub-menu>
                  </template>

                  <!-- 二级菜单没有子菜单的情况 -->
                  <template v-else>
                    <el-menu-item :index="child.path">
                      <i :class="child.icon || 'fa fa-circle-o'"></i>
                      <span>{{ child.name }}</span>
                    </el-menu-item>
                  </template>
                </template>
              </el-sub-menu>
            </template>

            <!-- 没有子菜单的情况 -->
            <template v-else>
              <el-menu-item :index="menu.path">
                <i :class="menu.icon || 'fa fa-circle'"></i>
                <span>{{ menu.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
    </div>

    <!-- Main container -->
    <div class="main-container">
      <!-- Header -->
      <div class="header tech-border">
        <div class="left-area">
          <i class="collapse-btn fa" :class="sidebar.opened ? 'fa-indent' : 'fa-outdent'" @click="toggleSidebar"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="$route.meta && $route.meta.title" key="route-title">
              {{ $route.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="right-area flow-light">
          <el-dropdown trigger="click">
            <span class="user-dropdown">
              <img v-if="avatar" key="header-avatar" :src="avatar" class="header-avatar-img" alt="用户头像">
              <i v-else key="header-default" class="fa fa-user-circle"></i>
              {{ name }}
              <i class="fa fa-caret-down"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- Content area -->
      <div class="content-container">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>

      <!-- Footer -->
      <app-footer />
    </div>
  </div>
</template>
<script setup lang="ts">
import AppFooter from '@/components/Footer.vue'
import { useAppStore } from '@/stores'
import { useMenuStore } from '@/stores/menu'
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const store = useAppStore()
const menuStore = useMenuStore()

// 响应式数据
const avatarInput = ref(null)
const menuRef = ref(null)
const openedMenus = ref<string[]>([])

// 计算属性
const sidebar = computed(() => store.sidebar)
const name = computed(() => store.name)
const avatar = computed(() => store.avatar)
const userMenus = computed(() => menuStore.userMenus)
const menuLoading = computed(() => menuStore.menuLoading)

// 方法
const toggleSidebar = () => {
  store.toggleSidebar()
}

const logout = async () => {
  await store.logout()
  router.push('/login')
}

const handleAvatarChange = async (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    // 文件大小限制为2MB
    if (file.size > 2 * 1024 * 1024) {
      ElMessage.error('头像图片大小不能超过2MB')
      return
    }

    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.error('请选择图片文件')
      return
    }

    try {
      const formData = new FormData()
      formData.append('avatar', file)

      // 使用request工具，它会自动使用正确的baseURL
      const { userAPI } = await import('@/api/user')
      const response = await userAPI.uploadAvatar(formData)

      // 强制刷新用户信息
      await store.getUserInfo(true)
      ElMessage.success('头像更新成功')
    } catch (error) {
      console.error('头像上传失败:', error)
      ElMessage.error('头像上传失败')
    }
  }
}

const triggerUpload = () => {
  avatarInput.value?.click()
}

// 移除了根据路由查找菜单的逻辑，使用传统手风琴模式

// 菜单展开事件
const handleMenuOpen = (menuId: string) => {
  console.log('菜单展开:', menuId)

  // 更新展开菜单列表
  if (!openedMenus.value.includes(menuId)) {
    openedMenus.value.push(menuId)
  }
}

// 菜单折叠事件
const handleMenuClose = (menuId: string) => {
  console.log('菜单折叠:', menuId)

  // 从展开列表中移除
  openedMenus.value = openedMenus.value.filter(id => id !== menuId)
}

// 移除了自动展开当前页面菜单的逻辑，恢复传统手风琴模式

// 生命周期
onMounted(async () => {
  // 如果菜单还没有加载，尝试加载
  if (menuStore.userMenus.length === 0 && store.userInfo && !menuStore.menuLoading) {
    try {
      await menuStore.loadUserMenus()
    } catch (error) {
      console.error('加载菜单失败:', error)
    }
  }
})
</script>

<style lang="scss" scoped>
@use './styles/tech-background.scss';

.app-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  background: radial-gradient(ellipse at bottom, #121a40 0%, #050a24 60%, #020314 100%);
  overflow: hidden;

  &.collapse {
    .sidebar-container {
      width: 64px;

      .logo-container {
        padding: 5px 10px; /* 减少上下内边距 */
        height: 50px; /* 固定高度，避免遮挡 */

        .logo-wrapper {
          justify-content: center;
          align-items: center;
          height: 100%;

          .logo-icon {
            margin-right: 0;
            display: flex !important; /* 强制显示图标 */
            align-items: center;
            justify-content: center;
            font-size: 20px; /* 图标大小 */
          }

          .logo-text {
            display: none; /* 折叠时隐藏文字 */
          }
        }
      }

      .avatar-container {
        padding: 10px; /* 减少头像容器的内边距 */
      }
    }

    .main-container {
      margin-left: 64px;
    }
  }
}

.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(ellipse at bottom, #121a40 0%, #050a24 60%, #020314 100%);
}

/* Global Header Styles */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(7, 15, 35, 0.9);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 15px rgba(7, 15, 35, 0.9);
  border-bottom: 1px solid rgba(61, 199, 255, 0.4);
  overflow: hidden;
}

.global-title {
  font-size: 18px;
  font-weight: bold;
  color: #e6e6e6;
  text-shadow: 0 0 10px rgba(61, 199, 255, 0.7);
  animation: title-pulse 3s infinite alternate;
  letter-spacing: 1px;
  position: relative;
  padding: 0 20px;
}

@keyframes title-pulse {
  0% { text-shadow: 0 0 10px rgba(61, 199, 255, 0.7); }
  100% { text-shadow: 0 0 20px rgba(61, 199, 255, 1), 0 0 30px rgba(61, 199, 255, 0.5); }
}

.sidebar-container {
  top: 40px;
  height: calc(100% - 40px);
  width: 260px; /* 调整宽度到260px，稍微减小 */
  position: fixed;
  left: 0;
  z-index: 10;
  background-color: rgba(7, 15, 35, 0.9);
  transition: width 0.3s;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(7, 15, 35, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 234, 255, 0.2);
  flex-shrink: 0; /* 防止被压缩 */
  position: relative;
  z-index: 5; /* 与logo容器同级 */

  &.collapsed {
    padding: 10px;
  }
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(0, 234, 255, 0.5);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: #00eaff;
    box-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  }
}

/* 折叠状态下的头像样式 */
.app-wrapper.collapse .avatar-wrapper {
  width: 40px;
  height: 40px;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  font-size: 60px;
  color: rgba(0, 234, 255, 0.7);
  line-height: 76px;
  transition: all 0.3s;
}

/* 折叠状态下的默认头像 */
.app-wrapper.collapse .default-avatar {
  font-size: 30px;
  line-height: 36px;
}

.avatar-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  color: #00eaff;
  font-size: 12px;

  &:hover {
    opacity: 1;
  }

  i {
    font-size: 20px;
    margin-bottom: 5px;
  }
}

/* Logo Container */
.logo-container {
  padding: 10px 10px; /* 减小内边距，降低高度 */
  border-bottom: 1px solid rgba(0, 234, 255, 0.2);
  flex-shrink: 0; /* 防止被压缩 */
  position: relative;
  z-index: 2; /* 与菜单同一层级 */
}

.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: all 0.3s;
}

.logo-text {
  flex: 1;
  transition: opacity 0.3s;

  &.hidden {
    opacity: 0;
  }
}

.logo-icon {
  font-size: 24px; /* 减小图标大小 */
  color: #00eaff;
  margin-right: 10px; /* 减小右边距 */
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
  flex-shrink: 0; /* 防止图标被压缩 */
  width: auto; /* 展开状态下自动宽度 */
  height: auto; /* 展开状态下自动高度 */
}

.logo {
  font-size: 14px; /* 调整字体大小 */
  color: #00eaff;
  margin: 0;
  transition: opacity 0.3s;
  white-space: nowrap; /* 防止换行 */
  line-height: 1.2; /* 调整行高 */
  flex: 1; /* 占用剩余空间 */

  &.hidden {
    opacity: 0;
  }
}

/* 科技感标题样式 */
.cyber-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  .title-part {
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    animation: cyber-glow 2s ease-in-out infinite alternate !important;
  }

  .title-devops {
    color: #00ff88 !important; /* DevOps用绿色 */
    text-shadow:
      0 0 5px rgba(0, 255, 136, 0.8),
      0 0 10px rgba(0, 255, 136, 0.6),
      0 0 15px rgba(0, 255, 136, 0.4) !important;
    animation-delay: 0.5s !important;
  }

  .title-system {
    color: #ff6b6b !important; /* 系统部分用红色，避免与图标颜色冲突 */
    text-shadow:
      0 0 5px rgba(255, 107, 107, 0.8),
      0 0 10px rgba(255, 107, 107, 0.6),
      0 0 15px rgba(255, 107, 107, 0.4) !important;
  }

  .title-separator {
    color: rgba(255, 255, 255, 0.9) !important; /* 分隔符用亮白色 */
    font-weight: 300 !important;
    animation: separator-pulse 1.5s ease-in-out infinite !important;
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(0, 234, 255, 0.6) !important;
  }
}

@keyframes cyber-glow {
  0% {
    text-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor;
  }
  100% {
    text-shadow:
      0 0 8px currentColor,
      0 0 16px currentColor,
      0 0 24px currentColor,
      0 0 32px currentColor;
  }
}

@keyframes separator-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Menu Scroll Container - 强制隐藏滚动条 */
.menu-scroll-container {
  position: absolute !important;
  top: 170px !important;
  bottom: 50px !important;
  left: 0 !important;
  right: 0 !important;
  overflow-y: scroll !important; /* 保持滚动功能 */
  overflow-x: hidden !important;
  padding-bottom: 10px !important;
  height: auto !important;
  max-height: none !important;
  z-index: 1 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* 强制隐藏所有滚动条元素 */
.menu-scroll-container::-webkit-scrollbar {
  width: 0px !important;
  background: transparent !important;
  display: none !important;
}

.menu-scroll-container::-webkit-scrollbar-thumb {
  background: transparent !important;
  display: none !important;
}

.menu-scroll-container::-webkit-scrollbar-track {
  background: transparent !important;
  display: none !important;
}





/* 折叠状态下的菜单滚动容器 */
.app-wrapper.collapse .menu-scroll-container {
  top: 120px !important; /* 折叠状态下头像和logo占用更少空间 */
  bottom: 50px !important; /* 与展开状态保持一致 */
}



/* Menu Loading Styles */
.menu-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #00eaff;
  font-size: 14px;

  i {
    margin-right: 8px;
    font-size: 16px;
  }

  span {
    opacity: 0.8;
  }
}

/* Menu Styles */
.el-menu-vertical {
  border: none !important;
  background-color: transparent !important;
  height: auto !important; /* 允许菜单高度自适应 */
  min-height: 100% !important; /* 确保菜单至少填满容器高度 */
  max-height: none !important; /* 移除最大高度限制 */
  overflow: visible !important; /* 允许内容溢出到滚动容器 */

  .el-menu-item {
    color: #e6e6e6 !important;
    background-color: transparent !important;
    border-left: 3px solid transparent;
    /* transition: all 0.3s; 注释掉，避免覆盖二级菜单动画 */

    &:hover {
      background-color: rgba(0, 234, 255, 0.1) !important;
      border-left-color: rgba(0, 234, 255, 0.5);
      color: #00eaff !important;
    }

    &.is-active {
      background-color: rgba(0, 234, 255, 0.2) !important;
      border-left-color: #00eaff;
      color: #00eaff !important;
      box-shadow: 0 0 10px rgba(7, 15, 35, 0.9);
    }

    i {
      margin-right: 10px !important;
      font-size: 16px !important;
      color: #00eaff !important;
      width: 16px !important;
      text-align: center !important;
    }
  }

  .el-sub-menu {
    .el-sub-menu__title {
      color: #ffffff !important; /* 一级菜单用白色，更突出 */
      background: linear-gradient(135deg, rgba(0, 234, 255, 0.08), rgba(74, 156, 248, 0.08)) !important;
      border-left: 4px solid rgba(0, 234, 255, 0.3) !important;
      border-radius: 6px !important;
      margin: 2px 6px !important;
      font-weight: 600 !important; /* 加粗字体 */
      font-size: 15px !important; /* 稍大字体 */
      box-shadow: 0 2px 8px rgba(0, 234, 255, 0.1) !important;
      /* transition: all 0.3s; 注释掉，避免覆盖二级菜单动画 */

      &:hover {
        background: linear-gradient(135deg, rgba(0, 234, 255, 0.2), rgba(74, 156, 248, 0.2)) !important;
        border-left-color: rgba(0, 234, 255, 0.8) !important;
        color: #00eaff !important;
        transform: translateX(3px) !important;
        box-shadow: 0 4px 12px rgba(0, 234, 255, 0.3) !important;
      }

      i {
        margin-right: 12px !important;
        font-size: 18px !important; /* 更大的图标 */
        color: #00eaff !important;
        width: 18px !important;
        text-align: center !important;
        text-shadow: 0 0 8px rgba(0, 234, 255, 0.6) !important;
      }
    }
  }
}

/* 折叠状态下的菜单样式 */
.el-menu--collapse {
  .el-menu-item,
  .el-sub-menu__title {
    padding: 0 20px !important;

    i {
      margin-right: 0 !important;
      font-size: 18px !important;
    }

    span {
      display: none !important;
    }
  }
}









/* 清除所有菜单项的默认样式 */
:deep(.el-sub-menu .el-menu-item) {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
}

/* 展开时淡入动画 */
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(1)) {
  animation: fadeIn 0.5s ease-out 0s forwards !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(2)) {
  animation: fadeIn 0.5s ease-out 0.1s forwards !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(3)) {
  animation: fadeIn 0.5s ease-out 0.2s forwards !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(4)) {
  animation: fadeIn 0.5s ease-out 0.3s forwards !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(5)) {
  animation: fadeIn 0.5s ease-out 0.4s forwards !important;
}

/* 折叠时淡出动画 */
:deep(.el-sub-menu:not(.is-opened) .el-menu-item:nth-child(1)) {
  animation: fadeOut 0.5s ease-in 0.4s forwards !important;
}
:deep(.el-sub-menu:not(.is-opened) .el-menu-item:nth-child(2)) {
  animation: fadeOut 0.5s ease-in 0.3s forwards !important;
}
:deep(.el-sub-menu:not(.is-opened) .el-menu-item:nth-child(3)) {
  animation: fadeOut 0.5s ease-in 0.2s forwards !important;
}
:deep(.el-sub-menu:not(.is-opened) .el-menu-item:nth-child(4)) {
  animation: fadeOut 0.5s ease-in 0.1s forwards !important;
}
:deep(.el-sub-menu:not(.is-opened) .el-menu-item:nth-child(5)) {
  animation: fadeOut 0.5s ease-in 0s forwards !important;
}

/* 简单有效的动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}





.main-container {
  margin-left: 260px; /* 对应侧边栏宽度调整 */
  margin-top: 40px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s;
}

.header {
  height: 60px;
  background-color: rgba(20, 29, 58, 0.7);
  border-bottom: 1px solid rgba(77, 138, 240, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  backdrop-filter: blur(10px);
}

.left-area {
  display: flex;
  align-items: center;

  .collapse-btn {
    font-size: 18px;
    color: #00eaff;
    cursor: pointer;
    margin-right: 20px;
    transition: all 0.3s;

    &:hover {
      color: #4a9cf8;
      text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
    }
  }
}

.right-area {
  .user-dropdown {
    display: flex;
    align-items: center;
    color: #e6e6e6;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(0, 234, 255, 0.1);
      color: #00eaff;
    }
  }

  .header-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(7, 15, 35, 0.9);
  }

  .fa-user-circle {
    font-size: 32px;
    margin-right: 8px;
    color: rgba(0, 234, 255, 0.7);
  }
}

.content-container {
  flex: 1;
  overflow-y: auto;
  background: transparent;
}

/* Transitions */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar-container {
    width: 64px;
  }

  .main-container {
    margin-left: 64px;
  }

  .logo {
    display: none;
  }
}

/* Glow effects */
.glow-text {
  animation: text-glow 2s infinite alternate;
}

@keyframes text-glow {
  0% { text-shadow: 0 0 10px rgba(0, 234, 255, 0.5); }
  100% { text-shadow: 0 0 20px rgba(0, 234, 255, 0.8), 0 0 30px rgba(7, 15, 35, 0.9); }
}

.flow-light {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.2), transparent);
    animation: flow 3s infinite;
  }
}

@keyframes flow {
  0% { left: -100%; }
  100% { left: 100%; }
}

.tech-border {
  border: 1px solid rgba(7, 15, 35, 0.9);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.1);
}

.cyber-panel {
  background: rgba(7, 15, 35, 0.9);
  backdrop-filter: blur(10px);
}

.cyber-border {
  border: 2px solid rgba(0, 234, 255, 0.5);
  box-shadow: 0 0 15px rgba(7, 15, 35, 0.9);
}

.cyber-text {
  color: #00eaff;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.5);
}

.cyber-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #00eaff, transparent);
  margin: 10px 0;
}

/* 全局覆盖Element Plus菜单样式 */
:deep(.el-menu) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background-color: transparent !important; /* 确保背景透明 */
}

:deep(.el-menu-vertical) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background-color: transparent !important; /* 确保背景透明 */
}

:deep(.el-menu--inline) {
  background-color: transparent !important; /* 删除二级菜单的灰色背景 */
  border: none !important;
  box-shadow: none !important;
}

/* 控制真正影响布局的容器 */
:deep(.el-sub-menu) {
  overflow: hidden !important;
  max-height: 50px !important; /* 只显示标题的高度 */
  transition: max-height 0.4s ease-out !important;
}

/* 展开状态 - 既响应式又有动画 */
:deep(.el-sub-menu.is-opened) {
  max-height: 1000px !important; /* 设置足够大的值，实现响应式效果 */
  transition: max-height 0.6s ease-out !important; /* 保持动画 */
}

/* 折叠状态 - 直接收起，无动画 */
:deep(.el-sub-menu:not(.is-opened)) {
  max-height: 50px !important; /* 只保留标题高度 */
  transition: none !important; /* 禁用折叠动画 */
}

:deep(.el-sub-menu__wrap) {
  overflow: hidden !important;
  background-color: transparent !important;
}

/* 修复菜单标题hover效果，避免遮挡 */
:deep(.el-sub-menu__title) {
  /* 不设置transition，避免覆盖二级菜单动画 */
  position: relative !important;
  z-index: 1 !important;

  &:hover {
    transform: translateX(3px) !important; /* 移除scale，只移动 */
    background: rgba(0, 234, 255, 0.1) !important; /* 用背景色替代阴影 */
    border-radius: 4px !important;
    z-index: 1 !important;
  }
}

/* 最强选择器强制覆盖所有一级菜单hover效果 */
:deep(.sidebar-container .el-menu-vertical .el-menu-item:hover),
:deep(.el-menu.el-menu-vertical .el-menu-item:hover),
:deep(.el-menu > .el-menu-item:hover) {
  transform: translateX(3px) !important; /* 强制只向右移动，禁用所有其他transform */
  background: rgba(0, 234, 255, 0.1) !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  box-shadow: none !important; /* 禁用阴影效果 */
  border-left-color: rgba(0, 234, 255, 0.5) !important;
}

/* 一级菜单项基础样式 */
:deep(.el-menu > .el-menu-item),
:deep(.sidebar-container .el-menu > .el-menu-item) {
  position: relative !important;
  z-index: 2 !important;
}

/* 二级菜单项样式 - 更内敛的设计 */
:deep(.el-menu .el-sub-menu .el-menu-item) {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: opacity 2s ease-out, transform 2s ease-out !important;
  background: rgba(255, 255, 255, 0.03) !important; /* 更淡的背景 */
  border-left: 2px solid rgba(0, 234, 255, 0.3) !important; /* 更细的边框 */
  margin: 1px 15px !important; /* 更多左边距，体现层级 */
  border-radius: 4px !important; /* 更小的圆角 */
  font-size: 13px !important; /* 更小的字体 */
  color: #cccccc !important; /* 更淡的文字颜色 */
  position: relative !important;
  z-index: 1 !important;
}

/* 二级菜单项hover效果 - 更内敛 */
:deep(.el-menu .el-sub-menu .el-menu-item:hover) {
  background: rgba(0, 234, 255, 0.08) !important; /* 更淡的hover */
  border-left-color: rgba(0, 234, 255, 0.6) !important;
  color: #e6e6e6 !important;
  transform: translateX(3px) !important; /* 更小的移动 */
}

/* 二级菜单项选中状态 - 适度突出 */
:deep(.el-menu .el-sub-menu .el-menu-item.is-active) {
  background: rgba(0, 234, 255, 0.12) !important; /* 适度的选中背景 */
  border-left: 3px solid rgba(0, 234, 255, 0.8) !important;
  color: #00eaff !important;
  font-weight: 500 !important; /* 中等加粗 */
  transform: translateX(3px) !important;
}

/* 二级菜单项选中状态的图标 */
:deep(.el-menu .el-sub-menu .el-menu-item.is-active i) {
  color: #00eaff !important;
}

/* 展开时菜单项淡入 - 放慢5倍 */
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(1)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(2)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.75s !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(3)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 1.5s !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(4)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 2.25s !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(5)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 3s !important;
}
:deep(.el-sub-menu.is-opened .el-menu-item:nth-child(6)) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 3.75s !important;
}

/* 折叠时直接隐藏，无动画 */
:deep(.el-sub-menu:not(.is-opened) .el-menu-item) {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
  transition: none !important; /* 禁用折叠动画 */
}


</style>
